<template>
  <a-descriptions label-placement="left" bordered :column="1" size="large" :label-style="{ width: '20%' }">
    <a-descriptions-item label="作者">{{ author }}</a-descriptions-item>
    <a-descriptions-item label="版本">
      <a-tag color="#10aec2">{{ version }}</a-tag>
    </a-descriptions-item>
    <a-descriptions-item label="Swagger版本">
      <a-tag color="#10aec2">{{ swagger || '2.0.0' }}</a-tag>
    </a-descriptions-item>
    <a-descriptions-item label="Host">{{ host }}</a-descriptions-item>
    <a-descriptions-item label="BasePath">{{ basePath }}</a-descriptions-item>
    <a-descriptions-item label="服务Url">
      <a-link v-if="url" :href="url" target="_blank" icon>{{ url }}</a-link>
    </a-descriptions-item>
    <a-descriptions-item label="分组名称">{{ groupName }}</a-descriptions-item>
    <a-descriptions-item label="分组Url">{{ groupUrl }}</a-descriptions-item>
    <a-descriptions-item label="分组Location">{{ groupLocation }}</a-descriptions-item>
    <a-descriptions-item label="简介">
      <a-typography-text>
        {{ description }}
      </a-typography-text>
    </a-descriptions-item>
    <a-descriptions-item label="接口统计信息">
      <a-space :size="40">
        <a-badge v-for="(item, index) in methodStatistics" :key="index" :offset="[6, -3]" :count="item.count">
          <a-tag :color="MethodColor[item.method]">{{ item.method }}</a-tag>
        </a-badge>
      </a-space>
    </a-descriptions-item>
  </a-descriptions>
</template>

<script setup lang="ts">
  import { useDashboardStore } from '@/store'
  import { MethodColor } from '@/types/knife4j'

  const dashboardStore = useDashboardStore()
  const { author, version, swagger, url, host, basePath, groupName, groupUrl, groupLocation, description, methodStatistics } = storeToRefs(dashboardStore)
  dashboardStore.updateStatistics('GET')
</script>

<style lang="less" scoped>
  :deep(.arco-badge-number) {
    box-shadow: none;
  }
</style>
